<template>
  <div class="app-container">
    <div class="header" style="display: flex;justify-content: space-between;">
      <div class="right">
        <el-button type="primary" size="small" @click="addMenu">添加</el-button>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      row-key="id"
      border
      fit
      highlight-current-row
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="菜单名称"  align="center" prop="name"></el-table-column>
      <el-table-column label="图标"  align="center" prop="MenuCode" width="70">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column label="权限标识"  align="center" prop="perms" width="170"> </el-table-column>
      <el-table-column label="路由地址"  align="center" prop="path"> </el-table-column>
      <el-table-column label="组件路径"  align="center" prop="component" width="170"> </el-table-column>
      <el-table-column label="排序"  align="center" prop="sortValue" width="50"> </el-table-column>
      <el-table-column label="创建时间"  align="center" prop="createTime" width="170"> </el-table-column>
      <el-table-column class-name="status" label="状态"  prop="createTime" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#409eff"
            inactive-color="#ccc">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">
          <el-button icon="el-icon-plus" type="success" @click=insertMenu(scope.row) size="mini"></el-button>
          <el-button icon="el-icon-edit" type="primary" @click=editMenu(scope) size="mini"></el-button>
          <el-button icon="el-icon-delete" type="warning" @click="deleteMenu(scope.row.id)" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>


<!--    弹窗-->
    <el-dialog title="菜单" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px" label-position="right">
        <el-form-item label="上级菜单" >
          <el-input style="width: 90%;" v-model="form.parentName" readonly/>
        </el-form-item>
        <el-form-item label="菜单类型" >
          <el-radio-group v-model="form.type">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" >
          <el-input style="width: 90%;"  v-model="form.name" />
        </el-form-item>
        <el-form-item label="图标" >
          <el-select v-model="form.icon" placeholder="请选择">
            <el-option
              v-for="item in icons"
              :key="item.value"
              :label="item.value"
              :value="item.value">
              <i :class="item.value"></i><span>---{{item.value}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" >
          <el-input-number style="width: 90%;"  v-model="form.sortValue" />
        </el-form-item>
        <el-form-item label="路由地址" >
          <el-input style="width: 90%;"  v-model="form.path" />
        </el-form-item>
        <el-form-item label="组件地址" >
          <el-input style="width: 90%;"  v-model="form.component" />
        </el-form-item>
        <el-form-item label="状态" >
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/systemMenu'
//类型(0:目录,1:菜单,2:按钮)
export default {
  data() {
    return {
      list: [],
      listLoading: true,
      dialogFormVisible:false,
      icons:[
        {value:"el-icon-platform-eleme"},
        {value:"el-icon-eleme"},
        {value:"el-icon-delete-solid"},
        {value:"el-icon-delete"},
        {value:"el-icon-s-tools"},
        {value:"el-icon-setting"},
        {value:"el-icon-user-solid"},
        {value:"el-icon-user"},
        {value:"el-icon-phone"},
        {value:"el-icon-phone-outline"},
        {value:"el-icon-more"},
        {value:"el-icon-more-outline"},
        {value:"el-icon-star-on"},
        {value:"el-icon-star-off"},
        {value:"el-icon-s-goods"},
        {value:"el-icon-goods"},
        {value:"el-icon-warning"},
        {value:"el-icon-warning-outline"},
        {value:"el-icon-question"},
        {value:"el-icon-info"},
        {value:"el-icon-remove"},
        {value:"el-icon-circle-plus"},
        {value:"el-icon-success"},
        {value:"el-icon-error"},
        {value:"el-icon-zoom-in"},
        {value:"el-icon-zoom-out"},
        {value:"el-icon-remove-outline"},
      ],
      form:{
        "parentId": null,
        "parentName": "",
        "name": "",
        "type": 0,
        "path": null,
        "component": null,
        "perms": "",
        "icon": null,
        "sortValue": 1,
        "status": 1,
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    findParent(id){
      let obj;
      let findNext=(object)=>{
        let list=object.children;
        for (let i = 0; i < list.length; i++) {
          let item=list[i];
          if (item.id===id){
            obj=object;
            return;
          }if (!obj) {
            findNext(item)
          }
        }
      }
      findNext(this.list[0]);
      return obj;
    },
    resetForm(){
      this.form={
        "parentName": "",
        "parentId": 0,
        "name": "",
        "type": 0,
        "path": null,
        "component": null,
        "perms": "",
        "icon": null,
        "sortValue": 1,
        "status": 1,
      }
    },
    submitMenu(){
      if (this.form.id){
        api.updateMenu(this.form).then(value => {
          console.log(value);
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.fetchData();
          this.dialogFormVisible=false;
        });
      }else {
        api.saveMenu(this.form).then(value => {
          console.log(value);
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.fetchData();
          this.dialogFormVisible=false;
        });
      }
    },
    addMenu(){
      this.resetForm();
      this.dialogFormVisible=true;
    },
    insertMenu(row){
      this.resetForm();
      this.form.parentId=row.id;
      this.form.parentName=row.name;
      this.dialogFormVisible=true;
    },
    editMenu(scope){
      this.addMenu();
      this.form=JSON.parse(JSON.stringify(scope.row));
      let obj=this.findParent(scope.row.id);
      this.form.parentName=obj ? obj.name : "";
    },
    deleteMenu(id){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await api.removeMenu(id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.fetchData();
      }).catch(() => {
      });
    },
    fetchData() {
      this.listLoading = true
      api.getPageList().then(response => {
        this.list = response
        this.listLoading = false
      })
    }
  }
}
</script>
